<template>
    <div class="shoptypepage">
            <van-tabs v-model="active">
         <van-tab >
        <div slot="title">
           全部
        </div>
       <dl>
         <dt><img src="../../static/img_02.jpg"/></dt>
         <dd>
           <h3>Bubble小气泡·毛孔深层清洁管理</h3>
           <p class="time">45min</p>
           <p class="count"><span class="money">￥199.00</span><i>已售：1140</i></p>
         </dd>  
       </dl>
    </van-tab>
     <van-tab >
        <div slot="title">
             产品
        </div>
        内容
    </van-tab>
     <van-tab >
        <div slot="title">
             产品
        </div>
        内容
    </van-tab>
     <van-tab >
        <div slot="title">
             产品
        </div>
        内容
    </van-tab>
    </van-tabs>
    </div>
</template>

<script>
export default {
  data () {
    return {
        active:0
    }
  }
  }
</script>

<style lang="less" scoped>

</style>
<style>
.shoptypepage .van-tabs__line{
    display: none
}

.shoptypepage .van-tab{
  flex: none;
  width: 1.26rem;
  line-height: .8rem;
  background: none;
  font-size: .12rem;
  
}
.shoptypepage .van-hairline--top-bottom::after{
    border: none;
}
.shoptypepage .van-tabs--line .van-tabs__wrap{
    height: .8rem;
} 
.shoptypepage .van-tab--active{
    background: #ffe55c;
    border-radius: 1rem;
}
.shoptypepage .van-tabs__nav{
      background: none;  
}
.shoptypepage .van-tabs .van-tab__pane{
  background: #fff;
}   
</style>